<template>
  <div class="setting-content">
    <div class="title">
      <div>OAuth 应用</div>
    </div>
    <NextMessage>
      <span>OAuth应用是用户中的一种授权机制，OpenAPI 调用访问启用 AccessKey ID 和 AccessKey Secret，支持通过 API 或其他开发工具访问有权限的资源
        <br>为降低泄露风险， AccessKey Secret 仅在生成时可以查看, 每个用户只能创建1个，但是主账号可创建多个RAM用户来配置各自的 AccessKey
      </span>
    </NextMessage>
    <div class="content">
      <RuifoxTable
        :loading="tableLoading"
        :default-index="true"
        v-model:tableData="tableData"
        v-model:fieldList="fieldList"
      >
        <!-- <template #name='{element}'>
          <div class="img-title">
            <div class="img-box">
              <img class="icon" v-if="element.type != 1" :src="getAvatarUrl(element.type)" alt="">
              <img class="pic" v-else :src="element.url" alt="">
            </div>
            <span class="file-name">{{element.name}}</span>
          </div>
        </template> -->
        <template #options='{element}'>
          <div class="table-td-option">
            <el-button type="primary" size="small" class="unmover" link @click="handleAllocation(element)">编辑</el-button>
          </div>
        </template>
      </RuifoxTable>
      <PaginationViewSimple
        :total="params.total"
        :pageSize="params.pageSize"
        :currentPage="params.currentPage"
        @currentChange="handleCurrentPageChange"
        @changeSize="handlePageSizeChange"
      />
    </div>
    <!-- 回复 -->
    <el-dialog
      v-model="replyDialog"
      draggable
      title="回复"
      width="700px"
    >
      <el-form 
        :model="replyForm" 
        label-width="auto" 
        ref="replyFormRef" 
        :rules="replyRules"
      >
      <el-form-item label="患者：">
        <span>{{curRow.patient}} |</span>
        <span>{{curRow.sex}} |</span>
        <span>{{curRow.age}}岁</span>
      </el-form-item>
      <el-form-item label="提交时间：">
        <span>{{curRow.questionTime}}</span>
      </el-form-item>
      <el-form-item label="资讯内容：">
        <span>{{curRow.question}}</span>
      </el-form-item>
      <el-form-item label="回复：" prop="reply">
        <el-input v-model="replyForm.reply" type="textarea"/>
      </el-form-item>
    </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="replyDialog = false">取消</el-button>
          <el-button type="primary" @click="replySubmit(replyFormRef)">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const fieldList = ref([
  {
    title: '应用名称',
    name: 'name',
  },
  {
    title: '显示名称',
    name: 'showName',
  },
  {
    title: '应用 ID',
    name: 'id',
  },
  {
    title: '创建时间',
    name: 'createTime',
  },
  {
    title: '操作',
    width: 180,
    fixed: 'right',
    name: 'options'
  }
])

const params = ref({
  total: 0,
  pageSize: 30,
  currentPage: 1,
  keywords: null,
  showStatus: null,
  questionTime: null,
  replyTime: null,
})
const tableData = ref([])
if(process.env.NODE_ENV === 'development') {
  tableData.value = [
    { 
      name: '测试应用1',
      showName: '测试应用1',
      id: '54545',
      createTime: '2023-02-22 12:00:00',
    },
    { 
      name: '测试应用2',
      showName: '测试应用2',
      id: '46546',
      createTime: '2023-02-22 12:00:00',
    },
  ]
  params.value.total = tableData.value.length
}
const tableLoading = ref(false)
const hanldeGetTableData = async () => {
  // tableLoading.value = true
  // let res = await getMessageFeedback(params.value).finally(()=>{
  //   tableLoading.value = false
  // })
  // tableData.value = res.data
  // params.value.total = res.total
  1
}
hanldeGetTableData()


const handleCurrentPageChange = (page) => {
  params.value.currentPage = page
  hanldeGetTableData()
}
const handlePageSizeChange = (size) => {
  params.value.currentPage = 1
  params.value.pageSize = size
  hanldeGetTableData()
}


// 回复
const replyDialog = ref(false)
const replyFormRef = ref()
const replyRules = ref({
  reply: [{ required: true, message: '请输入回复内容', trigger: 'blur' }],
})
const curRow = ref({})
const defaultReplyForm = {
  reply: ''
}
const replyForm = ref(structuredClone(defaultReplyForm))
const replySubmit = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    }
  })
}


</script>
<style scoped lang='scss'>
.setting-content{
  .title{
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
  }
}
</style>